<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>AI+应用设计创新大赛</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--====== Favicon Icon ======-->
    <link rel="shortcut icon" href="/images/favicon.png" type="image/png">
    <!--====== Bootstrap CSS ======-->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!--====== default CSS ======-->
    <link rel="stylesheet" href="/css/default.css">
    <link rel="stylesheet" href="/font/bootstrap-icons.css">

    <link rel="stylesheet" href="/js/layui/css/layui.css">
    <!--====== Style CSS ======-->
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/main.css">
    <style>
        label.error{
            color: red;
            width: auto;
        }
    </style>
</head>
<body>
    <div class="container">
<!--        <div th:insert="common/mainHeader :: main_header"></div>-->
        <div class="main_frame">
            <div class="main_left">
                <ul>
                    <li>
                        <a th:href="@{/main}">
                            用户列表
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/uis/judgesUI}">
                            评委列表
                        </a>
                    </li>
                    <li class="active">
                        <a th:href="@{/uis/scoreOptionsUI}">
                            评分选项
                        </a>
                    </li>
                </ul>
            </div>
            <div class="main_right">
                <div class="main_right_container">
                    <div class="main_right_title">
                        <p><i class="bi bi-house-fill" style="font-size: 0.9rem;"></i>评分选项列表</p>
                    </div>
                    <div class="right_table">
                        <form class="form-horizontal" id="myForm" th:action="@{/uis/scoreOptionsUI}" method="post">
                            <div class="table_form search">
                                <input type="button" class="btn btn-info" id="add" th:value="添加">
                            </div>
<!--                            <div class="table_form search" th:if="${session.user.area == 0}">-->
<!--                                <select id="areaSearch" name="areaSearch">-->
<!--                                    <option data-value="0" value="0">请选择地域</option>-->
<!--                                    <option th:each="ar, arState : ${areas}" th:value="${ar.id}" th:selected="${areaSearch}==${ar.id}" th:text="${ar.name}"></option>-->
<!--                                </select>-->
<!--                                <input type="button" class="btn btn-primary" id="search" value="搜索" >-->
<!--                            </div>-->
                            <div class="table_form">
                                <table class="table" id="table">
                                </table>
                                <div id="page">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--====== Jquery js ======-->
    <script src="/js/jquery-1.12.4.min.js"></script>
    <script src="/js/modernizr-3.7.1.min.js"></script>

    <!--====== Bootstrap js ======-->
    <script src="/js/bootstrap.min.js"></script>

    <script src="/js/sweetalert.min.js"></script>
    <script src="/js/jquery-validate.js"></script>

    <!--====== layerUI js ======-->
    <script src="/js/layui/layui.js"></script>

    <script src="/js/common.js"></script>
    <script type="text/javascript" th:inline="javascript">

        refreshTable(0);
        function page_jump(pageNo){
            refreshTable(pageNo);
        }
        layui.use('form', function(){
            const layer = layui.layer;
            const form = layui.form;
            $('#add').click(function(){
                layer.open({
                    type: 1,
                    title: '新增评分选项信息',
                    area: ['400px', '450px'],
                    content: '<div style="margin: 16px;"><form class="layui-form layui-form-pane" id="addForm" action="">' +
                        '<div class="layui-form-item">' +
                        '   <label class="layui-form-label">选择框</label>' +
                        '   <div class="layui-input-inline">' +
                        '       <select lay-append-to="body" lay-append-position="fixed" name="type" lay-filter="fenzu">' +
                        '           <option value="1" selected>企业组</option>' +
                        '           <option value="2">高校组</option>' +
                        '       </select>' +
                        '   </div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                        '    <label class="layui-form-label">编号</label>' +
                        '    <div class="layui-input-block">' +
                        '      <input type="text" name="code" id="code" autocomplete="off" placeholder="请输入编号" lay-verify="required" class="layui-input">' +
                        '    </div>' +
                        '  </div>' +
                        '<div class="layui-form-item">' +
                        '    <label class="layui-form-label">名称</label>' +
                        '    <div class="layui-input-block">' +
                        '      <input type="text" name="name" id="name" autocomplete="off" placeholder="请输入名称" lay-verify="required" class="layui-input">' +
                        '    </div>' +
                        '  </div> '+
                        '<div class="layui-form-item">' +
                        '    <label class="layui-form-label">父编号</label>' +
                        '    <div class="layui-input-block">' +
                        '      <input type="text" name="parentCode" id="parentCode" autocomplete="off" placeholder="请输入父编号" lay-verify="required" class="layui-input">' +
                        '    </div>' +
                        '  </div> '+
                        '<div class="layui-form-item">' +
                        '    <label class="layui-form-label">分值</label>' +
                        '    <div class="layui-input-block">' +
                        '      <input type="text" name="score" id="score" autocomplete="off" placeholder="请输入分值" lay-verify="required" class="layui-input">' +
                        '    </div>' +
                        '  </div> '+
                        '<div class="layui-form-item">' +
                        '    <label class="layui-form-label">说明</label>' +
                        '    <div class="layui-input-block">' +
                        '      <input type="text" name="introduce" id="introduce" autocomplete="off" placeholder="请输入说明" lay-verify="required" class="layui-input">' +
                        '    </div>' +
                        '  </div> '+
                        '</form></div>',
                    btn: ['保存', '取消'],
                    success:function(layero, index){
                        form.render('select');
                    },
                    yes: function (index, layero) {
                        const data = {
                            'type': $('#type').val(),
                            'code': $('#code').val(),
                            'name': $('#name').val(),
                            'parentCode': $('#parentCode').val(),
                            'score': $('#score').val(),
                            'introduce': $('#introduce').val()
                        };
                        $.ajax({
                            url: '/option',
                            type: 'POST',
                            contentType: 'application/json',
                            data: JSON.stringify(data),
                            success: function (result) {
                                layer.close(index);
                                refreshTable(0);
                            },
                            error: function (error) {
                                layer.msg('保存失败：' + error.responseText);
                            }
                        });
                    },
                    cancel: function () {
                        layer.closeAll();
                    }
                })
            })
            form.render('select','fenzu');

        });
        $(document).ready(function(){

        })

        function refreshTable(pageNo){
            $.ajax({
                url: '/option/pagination?pageNo='+pageNo,
                type: 'GET',
                success: function (data) {
                    // 清空表格内容
                    $('#table').empty();
                    // 根据获取到的数据重新构建表格内容
                    let tableHtml = '<thead>' +
                        '<tr><th>类型</th>' +
                        '<th>编号</th>' +
                        '<th>名称</th>' +
                        '<th>父编号</th>' +
                        '<th>分值</th>' +
                        '<th>操作</th>' +
                        '</tr></thead><tbody>';
                    data.data.records.forEach(function (info) {
                        tableHtml += '<tbody><tr><td>' + ((info.type === 1)?"企业组":"高校组") + '</td><td>' + info.code + '</td>' +
                            '<td>' + info.name+ '</td><td>' + info.parentCode+ '</td><td>' + info.score+ '</td>' +
                            '<td><a href="#" onclick="update('+info.id+')">更改</a> | ' +
                            '<a href="#" onclick="del('+info.id+')">删除</a></td></tr>';
                    });
                    tableHtml += '</tbody>';
                    $('#table').html(tableHtml);

                    $('#page').empty();
                    let pageHtml = '';
                    if(data.data.current === 1){
                        pageHtml += '<span style="color: gray">首页 上一页</span>'
                    }else if(data.data.current >1){
                        pageHtml += '<span><a href="#" onclick="page_jump(1)">首页</a> <a href="#" onclick="page_jump(' + (data.data.current-1) + ')">上一页</a></span>';
                    }
                    pageHtml += '第<span>' + data.data.current + '</span>页，共<span>' + data.data.total + '</span>条';
                    let lastPage = (data.data.total/data.data.size)<=1?1:(data.data.total%data.data.size==0?(Math.floor(data.data.total/data.data.size)):(Math.floor(data.data.total/data.data.size)+1));
                    if(data.data.current === lastPage){
                        pageHtml += '<span style="color: gray">下一页 尾页</span>'
                    }else if(data.data.current < lastPage){
                        pageHtml += '<span><a  href="#" onclick="page_jump('+ (data.data.current+1) +')">下一页</a> ' +
                            '<a href="javascript:void(0)" onclick="page_jump('+ lastPage +')">尾页</a></span>';
                    }
                    $('#page').html(pageHtml);
                },
                error: function (error) {
                    layer.msg('获取数据失败：' + error.responseText);
                }
            });
        }

        function del(id){
            $.ajax({
                type: 'DELETE',
                url: '/option/'+id,
                success: function(data) {
                    if(data.message!=null){
                        swal({
                            text: data.message,
                            icon: 'error'
                        });
                    }else{
                        swal({
                            text: '删除成功！',
                            icon: 'success'
                        });
                        setTimeout(function(){
                            refreshTable();
                        }, 1000)
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log('Error: ');
                }
            });
        }
    </script>
</body>
</html>
